<template>
	<view class="mine">
		<!-- 标题栏 -->
		<cl-topbar title="个人中心" background-color="#f7f7f7" :show-back='false'></cl-topbar>
		<!-- 头像信息栏 -->
		<view class="avator-and-user-info">
			<!-- 左侧的头像和昵称 -->
			<view class="left-info">
				<image class="avator" src="http://127.0.0.1:5100/public/images/tou.webp" mode=""></image>
				<span class='oneLineOmission'>小甜蜜0595</span>
				<image class="change-icon" src="/static/images/pages/mine/PencilSimpleLine@2x.webp" mode=""></image>
			</view>
			<!-- 右侧会员码 -->
			<view class="right-scan-vip">
				<image src="/static/images/pages/mine/会员二维码@2x.webp" mode=""></image>
			</view>
		</view>
		<!-- 等级情况 -->
		<view class="vip-level-container">
			<image src="/static/images/pages/mine/vip.png" mode=""></image>
			<!-- 等级 -->
			<span class="vipLevel">
				Lv1
			</span>
			<!-- 卡号 -->
			<span class="vipId">
				卡号:&nbsp;20221211091306181
			</span>
			<!-- 进度条 -->
			<view class="progress">
				<!-- 左侧进度条 -->
				<view class="left-jindu">
					<cl-progress :value="40" :show-text='false' :color="['#ffb875','#feba7d']"></cl-progress>
				</view>
				<!-- 右侧字体样式 -->
				<view class="right-text">
					<em class='present'>800</em><em class='big'>/</em><em class='target'>1000</em>
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<MenuList class='menu' :menuList="menuList"></MenuList>
		<!-- 邀请好友 -->
		<view class="info">
			<image style="width: 100%;height: 100%;" src="../../static/images/pages/home/image.png@2x.webp" mode="">
			</image>
			<!-- <Swiper :swiperHeight="180"></Swiper> -->
		</view>
		<!-- 用户服务 -->
		<view class="user-server">
			<span class='title'>用户服务</span>
			<MenuList class='user-menu' :menuList="userServerMenuList" :colums="3"></MenuList>
		</view>

	</view>
</template>

<script>
	import MenuList from '@/components/MenuList/index.vue'
	export default {
		name: 'mine',
		components: {
			MenuList
		},
		mounted() {
			uni.loadFontFace({
				global: true,
				family: 'mine',
				source: 'url("/static/fonts/youshebiaotihei/YouSheBiaoTiHei-2.ttf")',
				success() {
					console.log('youshe引入成功')
				},
				fail(e) {
					console.log('index页面' + e);
				}
			})
		},
		data() {
			return {
				menuList: [{
						imgSrc: '/static/images/pages/mine/会员码@2x.webp',
						text: '会员码'
					},
					{
						imgSrc: '/static/images/pages/mine/兑换中心@2x.webp',
						text: '兑换中心'
					},
					{
						imgSrc: '/static/images/pages/mine/领券中心@2x.webp',
						text: '领券中心'
					},
					{
						imgSrc: '/static/images/pages/mine/充值中心@2x.webp',
						text: '充值中心'
					},
					{
						imgSrc: '/static/images/pages/mine/加盟合作@2x.webp',
						text: '加盟合作'
					},
					{
						imgSrc: '/static/images/pages/mine/兑换中心@2x.webp',
						text: '兑换中心'
					},
					{
						imgSrc: '/static/images/pages/mine/评论@2x.webp',
						text: '评论'
					},
				], //菜单栏信息
				userServerMenuList: [{
						imgSrc: '/static/images/pages/mine/账单明细@2x.webp',
						text: '账单明细'
					},
					{
						imgSrc: '/static/images/pages/mine/用户设置@2x.webp',
						text: '用户设置'
					},
					{
						imgSrc: '/static/images/pages/mine/意见反馈@2x.webp',
						text: '意见反馈'
					},
				], //用户服务信息
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		font-family: 'mine';
		width: 100%;
		min-height: 100%;
		background-color: $pages-background-color;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		// 头像信息栏
		.avator-and-user-info {
			width: 100%;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-info {
				width: calc(100% - 180rpx);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 60rpx;

				.avator {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					overflow: hidden;
					box-shadow: 0px 1rpx 2rpx 0px rgba(0, 0, 0, 0.25);
				}

				span {
					max-width: calc(100% - 160rpx);
					font-size: 28rpx;
					font-weight: 600;
					color: $main-text;
					margin-left: 4rpx;
				}

				.change-icon {
					width: 32rpx;
					height: 28rpx;
				}

			}

			.right-scan-vip {
				width: 180rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}

		//会员等级
		.vip-level-container {
			position: relative;
			margin-top: 10rpx;
			width: 700rpx;
			height: 360rpx;
			border-radius: 30rpx;
			background-size: 100% 100%;
			font-family: 'mine';
			overflow: hidden;
			box-shadow: 0rpx 0rpx 8rpx 0px #2f2845;

			//背景图片
			image {
				width: 100%;
				height: 100%;
			}

			//等级
			.vipLevel {
				position: absolute;
				top: 18rpx;
				left: 48rpx;
				font-size: 120rpx;
				font-weight: 400;
				color: transparent;
				background: linear-gradient(113.3deg, rgba(196, 152, 144, 1) 0%, rgba(249, 236, 204, 1) 99.86%);
				-webkit-background-clip: text;
			}

			//卡号
			.vipId {
				position: absolute;
				top: 220rpx;
				right: 18rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 1rpx;
				color: #ffeac6;
			}

			//进度条
			.progress {
				position: absolute;
				bottom: 0;
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;

				.left-jindu {
					flex: 1;
					padding-left: 35rpx;
				}

				.right-text {
					min-width: 20%;
					max-width: 35%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 28rpx;
					color: #faefec;
					padding-right: 16rpx;

					.present {
						padding-bottom: 16rpx;
						padding-left: 10rpx;
					}
					.big {
						font-size: 64rpx;
						margin-right: 8rpx;
						color: #febf89;
					}
					.target {
						padding-top: 16rpx;
						font-size: 34rpx;
						color: #feb274;
					}
				}
			}
		}

		//菜单栏
		.menu {
			margin-top: 16rpx;
		}

		// 邀请好友
		.info {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 700rpx;
			height: 200rpx;
			border-radius: 12rpx;
			background: linear-gradient(210.58deg, #FFFFFF 0%, #26BCD4 100%);
			overflow: hidden;
		}

		//用户服务
		.user-server {
			margin-top: 24rpx;
			margin-bottom: 24rpx;
			width: 700rpx;
			height: 224rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 100%;
				text-align: left;
				font-size: 32rpx;
				font-weight: 400;
				color: $main-text;
				padding-bottom: 10rpx;
			}

		}


	}
</style>
